<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Moonbay</title>
    <link rel="icon" type="image/x-icon" href="picture/图标logo.ico">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/singer.css">
    <link rel="stylesheet" href="css/iconfont.css">
</head>

<body>
    <div class="head">
        <ul>
            <li class="first">
                <a href="###">
                    <img src="image/logo2.png">
                </a>
            </li>
            <li class="center"><a href="index.html">Home</a></li>
            <li class="center"><a href="mymusic.html">My Music</a></li>
            <li class="center spe"><a href="singer.html">singer</a></li>
            <li class="center"><a href="ranking.html">Top</a></li>
            <li class="center"><a href="radio.html">Radio</a></li>
            <li class="login"><a href="re.html">Register</a></li>
            <li class="login"><a href="login.html">Login</a></li>
            <li class="login dotted"></li>
            <li class="login search">
                <input type="text" class="tex">
                <button class="btn"><i class="iconfont icon-sousuo"></i></button>
            </li>
        </ul>
    </div>
    <div class="singerback">
        <div class="back">
            <div class="banner">
                <div class="ban-title">All kinds of singers Close at your hand</div>
            </div>
        </div>
        <div class="back">
            <div class="ban">
                <div class="singer-letter">
                    <div class="letter active">All</div>
                    <div class="letter">A</div>
                    <div class="letter">B</div>
                    <div class="letter">C</div>
                    <div class="letter">D</div>
                    <div class="letter">E</div>
                    <div class="letter">F</div>
                    <div class="letter">G</div>
                    <div class="letter">H</div>
                    <div class="letter">I</div>
                    <div class="letter">G</div>
                    <div class="letter">K</div>
                    <div class="letter">L</div>
                    <div class="letter">M</div>
                    <div class="letter">N</div>
                    <div class="letter">O</div>
                    <div class="letter">P</div>
                    <div class="letter">Q</div>
                    <div class="letter">R</div>
                    <div class="letter">S</div>
                    <div class="letter">T</div>
                    <div class="letter">U</div>
                    <div class="letter">V</div>
                    <div class="letter">W</div>
                    <div class="letter">X</div>
                    <div class="letter">Y</div>
                    <div class="letter">Z</div>
                    <div class="letter">#</div>
                </div>
                <div class="singer-letter">
                    <div class="letter active">All</div>
                    <div class="letter">Inland</div>
                    <div class="letter">Europe</div>
                    <div class="letter">Hongkong</div>
                    <div class="letter">Korea</div>
                    <div class="letter">Japanese</div>
                    <div class="letter">Others</div>
                </div>
                <div class="singer-letter">
                    <div class="letter active">All</div>
                    <div class="letter">Male</div>
                    <div class="letter">Female</div>
                    <div class="letter">Group</div>
                </div>
            </div>
            <div class="singer-list clearfix ban">
                <a href="#">
                    <div class="singer-item">
                        <div class="singer-img">
                            <img src="picture/singerjpg.jpg" alt="">
                        </div>
                        <div class="singer-name">那英</div>
                    </div>
                </a>
                <a href="#">
                    <div class="singer-item">
                        <div class="singer-img">
                            <img src="picture/singer1.jpg" alt="">
                        </div>
                        <div class="singer-name">周杰伦</div>
                    </div>
                </a>
                <a href="#">
                    <div class="singer-item">
                        <div class="singer-img">
                            <img src="picture/singer2.jpg" alt="">
                        </div>
                        <div class="singer-name">薛之谦</div>
                    </div>
                </a>
                <a href="#">
                    <div class="singer-item">
                        <div class="singer-img">
                            <img src="picture/singer3.jpg" alt="">
                        </div>
                        <div class="singer-name">李荣浩</div>
                    </div>
                </a>
                <a href="#">
                    <div class="singer-item">
                        <div class="singer-img">
                            <img src="picture/singer4.jpg" alt="">
                        </div>
                        <div class="singer-name">G.E.M. 邓紫棋</div>
                    </div>
                </a>
                <a href="#">
                    <div class="singer-item">
                        <div class="singer-img">
                            <img src="picture/singer5.jpg" alt="">
                        </div>
                        <div class="singer-name">林俊杰</div>
                    </div>
                </a>
                <a href="#">
                    <div class="singer-item">
                        <div class="singer-img">
                            <img src="picture/singer6.jpg" alt="">
                        </div>
                        <div class="singer-name">陈奕迅</div>
                    </div>
                </a>
                <a href="#">
                    <div class="singer-item">
                        <div class="singer-img">
                            <img src="picture/singer7.jpg" alt="">
                        </div>
                        <div class="singer-name">许嵩</div>
                    </div>
                </a>
            </div>
            <div class="name-list ban clearfix">
                <div class="name-item">
                    <p>蔡健雅</p>
                    <p>张韶涵</p>
                    <p>Alan Walker (艾兰·沃克)</p>
                    <p>陈雪凝</p>
                    <p>张靓颖</p>
                    <p>胜屿</p>
                    <p>易烊千玺</p>
                    <p>庄心妍</p>
                    <p>韩红</p>
                </div>
                <div class="name-item">
                    <p>张杰</p>
                    <p>张宇</p>
                    <p>汪苏泷</p>
                    <p>BEYOND</p>
                    <p>永彬</p>
                    <p>Ryan.B</p>
                    <p>南征北战</p>
                    <p>NZBZ</p>
                    <p>王菲</p>
                </div>
                <div class="name-item">
                    <p>孙燕姿</p>
                    <p>李宇春</p>
                    <p>周深</p>
                    <p>周传雄</p>
                    <p>杨宗纬</p>
                    <p>肖战</p>
                    <p>Taylor Swift (泰勒·斯威夫特)</p>
                    <p>魏新雨</p>
                    <p>梁静茹</p>
                </div>
                <div class="name-item">
                    <p>于文文</p>
                    <p>张学友</p>
                    <p>任贤齐</p>
                    <p>宋冬野</p>
                    <p>陈粒</p>
                    <p>赵雷</p>
                    <p>儿歌</p>
                    <p> BIGBANG (빅뱅)</p>
                    <p>王俊凯</p>
                </div>
                <div class="name-item">
                    <p>吴亦凡</p>
                    <p>五月天</p>
                    <p>田馥甄</p>
                    <p>刘德华</p>
                    <p>郑源</p>
                    <p>孙露</p>
                    <p>莫文蔚</p>
                    <p>李克勤</p>
                    <p>华晨宇</p>
                </div>
            </div>
            <div class="page clearfix">
                <div class="page-item up">The previous page</div>
                <div class="page-item active">1</div>
                <div class="page-item">2</div>
                <div class="page-item">3</div>
                <div class="page-item">4</div>
                <div class="page-item">5</div>
                <div class="page-item">6</div>
                <div class="page-item">7</div>
                <div class="page-item">8</div>
                <div class="page-item">9</div>
                <div class="page-item">10</div>
                <div class="page-item">...</div>
                <div class="page-item down">The next page</div>
            </div>
        </div>
    </div>
    <!-- <div class="footer">
        <div class="our">
            <p class="about">版权信息</p>
            <p>© 2010-2023 Yuedu.fm All rights reserved 粤ICP备14076392号</p>
        </div>
    </div> -->
</body>

</html>